<template>
    <div id="app">
        <el-submenu :index="menu.menuCode" v-for="menu in menus" :key="menu.keyID"
                        v-if="menu.childs.length > 0">
                <template slot="title">
                    <i style="font-size:12px;color:#eee;" :class="menu.menuIcon"></i>
                    <span style="font-size:12px" slot="title">{{menu.menuName}}</span>
                </template>
                <template v-for="childMenu in menu.childs" >
                    <el-menu-item :index="childMenu.menuCode" v-if="childMenu.childs.length == 0">
                        <i style="font-size:12px;color:#eee;" :class="childMenu.menuIcon"></i>
                        <span style="font-size:12px" slot="title">{{childMenu.menuName}}</span>
                    </el-menu-item>
                    <sys-menu :menus="menu.childs" v-else></sys-menu>
                </template>
            </el-submenu>
    </div>
</template>

<script>
export default {
  name: 'sysmenu',
  props: {
    menus: Array
  },
  data () {
    return {

    }
  },
  mounted: function mounted () {
    if (this.menus == null) {
      console.log('null')
    } else {
      console.log(this.menus)
    }
  }
}
</script>

<style scoped>

</style>
